<template>
  <div class="home">
    <b-container>
      <b-jumbotron text-variant="white" class="_jumbotron-border bg">
        <template #header> <h2>欢迎来到未来社区</h2> </template>
        <template #lead>
          <div class="d-flex justify-content-between">
            <div>
              <b-img
                thumbnail
                fluid
                :src="userinfo.avatar"
                width="50"
                alt="Image 1"
              ></b-img>
              <span>下午好！{{ userinfo.username }}</span>
            </div>
            <div>
              <b-button size="sm" variant="primary" to="/post">发布最新话题</b-button>
            </div>
          </div>
        </template>
        <div class="d-flex justify-content-between">
          <p>
            您有 <b class="_b">{{ n }}</b> 条消息待回复
          </p>
        </div>
      </b-jumbotron>
    </b-container>
    <b-container class="mt-2 _container">
      <!-- {{article.acticle}} -->
      <b-row>
        <b-col
          v-for="item in article.datapage"
          :key="item.aid"
          cols="12"
          md="4"
          lg="3"
          sm="12"
          class="_card-height"
          @click="btntab(item.aid)"
          ><b-card
            :title="item.title"
            :img-src="item.imgUrl"
            img-alt="Image"
            img-top
            tag="article"
            class="mb-2"
          >
            <b-card-text>
              {{ item.outline }}
            </b-card-text>
            <div class="d-flex justify-content-between align-items-center">
              <b-button :to="{ name: 'Detail',query:{aid:item.aid} }" variant="primary">查看详情</b-button>
              <div>
                <b-icon icon="chat-square-dots" aria-hidden="true"></b-icon
                ><span>{{ item.chat }}</span>
                <b-icon icon="eye" aria-hidden="true"></b-icon
                ><span>{{ item.eye }}</span>
                <b-icon
                  icon="hand-thumbs-up"
                  aria-hidden="true"
                  style="color: red"
                ></b-icon
                ><span>{{ item.praise }}</span>
              </div>
            </div>
          </b-card></b-col
        >
      </b-row>
      <b-row class="align-items-center">
        <b-col offset="5" style="padding-left:40px">
          <a-pagination
            :total="article.acticle.length"
            @change="onChange"
            :pageSize="8"
          />
        </b-col>
      </b-row>
    </b-container>
    <b-container class="mt-2">
      <Carousel />
    </b-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import Modal from "../components/Modal.vue";
import Carousel from "../components/Carousel.vue";
export default {
  name: "Home",
  data() {
    return {
      userimg: require("../assets/zhuzhu.jpeg"),
      n: 10,
      tab: 0,
      detailsindex:""
    };
  },
  components: {
    Carousel,
    // Modal
  },
  methods: {
    ...mapMutations(["upuserinfo"]),

    btntab(index) {
      this.detailsindex=index
      console.log(index);
    },
    async upuser() {
      let userpersonal = await this.$Api.personal(); //获取用户信息
      this.upuserinfo(userpersonal.data.data); //信息存到vuex种
    },
    async Article() {
      //获取的文章的内容 然后丢进vuex 里面
      let res = await this.$article.article();
      console.log(res.data.data);
      this.$store.commit("article/upacticle", res.data.data);
      this.$store.commit("article/updatapage",this.article.acticle.slice(0,8));
  
    },
    //分页
    onChange(page, pageSize) {
      let params=this.article.acticle.slice((page - 1) * pageSize, page * pageSize)
      this.$store.commit("article/updatapage",params);
      // this.datapage = this.article.acticle.slice((page - 1) * pageSize, page * pageSize);
    },
  },
  computed: {
    ...mapState(["userinfo", "article"]),
    //  ...mapState({article:state=>state.article})
  },
  created() {
    this.upuser();
    this.Article();
  },
};
</script>
<style lang="scss">
body {
  font-family: "Exo", sans-serif;
  background: linear-gradient(-45deg, #ee7752, #9c023d, #0777a0, #0eecb8);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
.home {
  padding: 10px 0px;
  ._seach {
    form {
      display: flex;
      input {
        margin-right: 5px;
        max-width: 300px;
      }
    }
  }
  .card-body {
    h4 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
  ._nav {
    margin-top: 10px;
  }
  .user-margin {
    margin-left: 5px;
  }
  ._jumbotron-border {
    padding: 10px;
    margin-bottom: 10px;
    border-top: none;
    border: 1px solid #8989;
    border-radius: 15px;
  }
  ._b {
    font-size: 20px;
  }
  .bg {
    padding: 10px 20px 10px 10px;
    font-family: "Exo", sans-serif;
    color: #fff;
    // background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    // background-size: 400% 400%;
    // animation: gradientBG 15s ease infinite;
    background: rgba(222, 222, 222, 0.3);
    box-shadow: 0px 0px 5px;
  }
  ._card-height {
    .card-text {
      height: 100px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
    .card {
      img {
        width: 100%;
        height: 150px;
      }
    }
  }
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}
</style>
